<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-single-selector-bar
                title="大小"
                desc="size"
                :options="sizes"
                v-model="size"
            ></uxt-single-selector-bar>
            <uxt-bar title="圆角" desc="radius | round">
                <template slot="right">
                    <uxt-radio-group v-model="radius" size="sm" type="btn">
                        <uxt-radio label="无" value=""></uxt-radio>
                        <uxt-radio classes="margin-lr-sm" label="小圆角" value="radius"></uxt-radio>
                        <uxt-radio label="大圆角" value="round"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="镂空"
                desc="hollow=xx/颜色值"
                v-model="hollow"
                clearable
            ></uxt-color-selector-bar>
            <uxt-color-selector-bar
                title="颜色"
                desc="bg-color=xx/颜色值"
                v-model="bgColor"
                light
                gradual
                @change="hollow = ''"
            ></uxt-color-selector-bar>
            <uxt-color-selector-bar
                title="阴影"
                desc="shadow=xx/颜色值"
                v-model="shadow"
                clearable
            ></uxt-color-selector-bar>
            <uxt-bar title="禁用" desc="disabled">
                <template slot="right">
                    <uxt-switch
                        v-model="disabled"
                        radius
                        size="sm"
                    ></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="图标" desc="disabled">
                <template slot="right">
                    <uxt-switch v-model="icon" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <uxt-button
                    :size="sizes[size].value"
                    :round="radius === 'round'"
                    :radius="radius === 'radius'"
                    :hollow="hollow"
                    :bg-color="bgColor"
                    :shadow="shadow"
                    :disabled="disabled"
                    data-a="通过data-协带的数据"
                    @click="handleEvent('click', $event)"
                >
                    <uxt-icon
                        animation="spin"
                        type="spinner"
                        v-if="icon"
                    ></uxt-icon>
                    uxt-button
                </uxt-button>
            </view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtButton from '@xtcoder/uxt/components/uxt-button.vue'
import uxtIcon from '@xtcoder/uxt/components/uxt-icon.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'

export default {
    components: {
        uxtBarGroup,
        uxtButton,
        uxtIcon,
        uxtBar,
        uxtColorSelectorBar,
        uxtSingleSelectorBar,
        uxtRadio,
        uxtRadioGroup,
        uxtSwitch
    },
    data() {
        return {
            title: '按钮',
            sizes: [
                {
                    label: '小',
                    value: 'sm'
                },
                {
                    label: '默认',
                    value: ''
                },
                {
                    label: '大',
                    value: 'lg'
                },
                {
                    label: '块状',
                    value: 'block'
                }
            ],
            size: 3,
            radius: '',
            bgColor: 'theme',
            hollow: '',
            shadow: '',
            disabled: false,
            icon: false,
            events: ''
        }
    },
    methods: {
        handleEvent(type, e) {
            this.events += `@${type}${e !== undefined ? `(${JSON.stringify(e)})` : ''}<br />`
        }
    }
}
</script>

<style lang="scss" scoped>
.a {
    margin-left: 20rpx;
}
</style>
